<template>
	<view class="playout"  v-if="userInfo">
		<view class="emptyBox" :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="userinfo">
			<view class="avatar">
				<image src="../../static/images/xxmLogo.png" mode="aspectFill"></image>
			</view>
			<view class="ip">{{userInfo.IP}}</view>
			<view class="address">来自于:{{userInfo.address.country}} {{userInfo.address.province}} {{userInfo.address.city}}</view>
		</view>
		<!-- 选项列表1 -->
		<view class="section">
			<view class="list">
				<view class="box">
					<user-list-item icontype="download-filled" content="我的下载" :num="userInfo.downloadSize"></user-list-item>
					<navigator url="/pages/classlist/classlist?name=我的下载&type=download"></navigator>
				</view>
				<view class="box">
					<user-list-item icontype="star-filled" content="我的评分" :num="userInfo.scoreSize"></user-list-item>
					<navigator url="/pages/classlist/classlist?name=我的评分&type=score"></navigator>
				</view>
				<view class="box">
					<user-list-item icontype="chatboxes-filled" content="联系客服" num=""></user-list-item>
					<!-- 微信小程序平台 -->
					<!-- #ifdef MP-WEIXIN -->
						<button open-type="contact"></button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
						<button @click="clickContact"></button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 选项列表2 -->
		<view class="section">
			<view class="list">
				<view class="box">
					<user-list-item icontype="notification-filled" content="订阅更新" num=""></user-list-item>
					<navigator url="/pages/notice/detail?id=653507c6466d417a3718e94b"></navigator>
				</view>
				<view class="box">
					<user-list-item icontype="flag-filled" content="常见问题" num=""></user-list-item>
					<navigator url="/pages/notice/detail?id=6536358ce0ec19c8d67fbe82"></navigator>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {getNavBarHeight} from "@/utils/system_info.js"
	import {apiGetUserInfo} from "@/api/apis.js"
	
	const userInfo=ref(null)
	
	//点击联系客服
	function clickContact(){
		uni.makePhoneCall({
			phoneNumber:"18384027178"
		})
	}
	
	//获取用户信息
	async function getUserInfo(){
		uni.showLoading({
			title:"加载中..."
		})
		let res=await apiGetUserInfo()
		userInfo.value=res.data
		uni.hideLoading()
	}
	
	getUserInfo()
</script>

<style lang="scss" scoped>
	.playout{
		.userinfo{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 50rpx 0;
			.avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;	
					height: 100%;
				}
			}
			.ip{
				padding: 20rpx 0 5rpx;
				font-size: 44rpx;
				color: #333;
			}
			.address{
				font-size: 28rpx;
				color: #aaa;
			}
		}
		.section{
			margin: 50rpx auto;
			width: 690rpx;
			border: 2px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
			.list{
				.box{
					position: relative;
					button,
					navigator{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100rpx;
						opacity: 0;
					}
				}
			}
		}
	}
</style>
